<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件基础</title>
    <!--简单理解为，触发---响应机制 -->
</head>

<body>

    <button id="btn">唐伯虎</button>
    <div>时间</div>
    <p>1233</p>
    <h1></h1>
    <header>
        我是头文件
        <span>123</span>
    </header>
    <!-- 事件三个组成成分：事件源 事件类型 事件处理程序 -->
    <script>
        //事件源：事件被触发的对象 谁被触发
        var btn = document.getElementById('btn');
        //事件类型：如何被触发 什么事件 比如鼠标点击（onclick） 鼠标经过 还是键盘按下
        // 事件处理程序 通过一个函数赋值的方式完成
        btn.onclick = function() {
                alert('点秋香');
            }
            //操作元素，修改元素的内容 innerText
        var bt = document.querySelector('#btn');
        var T = document.querySelector('div');
        bt.onclick = function() {
            T.innerText = gettimer();
        }

        function gettimer() {
            var time = new Date();
            var h = time.getHours();
            //输出小于10时有0的效果
            h = h < 10 ? '0' + h : h;
            var m = time.getMinutes();
            m = m < 10 ? '0' + m : m;
            var s = time.getSeconds();
            s = s < 10 ? '0' + s : s;
            return h + ':' + m + ':' + s;
        }
        //可以不通过事件，直接在页面上显示
        var p = document.querySelector('p');
        p.innerHTML = gettimer();

        //innerText和innerHTML的区别    innerText 是非标准 不识别HTML的标签 会去除空格和换行    innerHTML是w3c标准 识别标签并且保留空格和换行
        var h1 = document.querySelector('h1');
        // h1.innerText = '今天是周天<strong>星期日</strong>' //可以修改内容，但是不能识别HTML5的标签
        h1.innerHTML = '今天是周天<i>星期日</i>'

        // 这两个标签是可以读写的
        var header = document.querySelector('header');
        console.log(header.innerText);
        console.log(header.innerHTML);
    </script>


    <button id="Mr_liu">刘德华</button>
    <button id="Mr_zhang">张学友</button><br>
    <img style="width: 150px;height: 150px;" src="https://img0.baidu.com/it/u=3355188499,2672406124&fm=253&fmt=auto&app=120&f=JPEG?w=1000&h=563" alt="">
    <script>
        //修改元素的属性 src
        //第一步获取元素
        var liu = document.querySelector('#Mr_liu');
        var zhang = document.querySelector('#Mr_zhang');
        var img = document.querySelector('img');

        //注册事件   处理程序
        liu.onclick = function() {
            img.src = 'https://img0.baidu.com/it/u=1015399861,252335004&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=313';
            img.title = '刘德华';
        }
        zhang.onclick = function() {
            img.src = 'https://img2.baidu.com/it/u=3420621936,4009653463&fm=253&fmt=auto&app=138&f=JPEG?w=351&h=480';
            img.title = '张学友';
        }
    </script>
</body>

</html>